<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <!--<link rel="stylesheet" href="css/iview.min.css">-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <!-- This page CSS -->
  <!-- chartist CSS -->
  <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
  <!--c3 CSS -->
  <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
  <!--Toaster Popup message CSS -->
  <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
  <!-- Custom CSS -->
  <link href="css/style.min.css" rel="stylesheet">
  <!-- Dashboard 1 Page CSS -->
  <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">
  <!-- page css -->
  <link href="css/pages/user-card.css" rel="stylesheet">
  <!-- Popup CSS -->
  <link href="css/magnific-popup.css" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
            <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="5"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">商品管理</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item active">
                <a href="prodControl.html">
                  企业管理
                </a>
              </li>
              <li class="breadcrumb-item active">
                <a href="prodControl.html">
                  商品管理
                </a>
              </li>
              <li class="breadcrumb-item active">发布商品</li>
            </ol>
          </div>
        </div>
        <!--流程-->
        <div class="bgfff lh70 fs14 cblue_2 p-l-30 d-flex align-cen m-b-20">
          <span class="mdi mdi-exclamation w40 h40 braduis50p bgblue cfff fs30 textc lh40 m-r-20"></span>
          <span>发布流程：1.选择商品分类 ------ 2.输入商品基本信息 ------ 3.输入商品详情 ------ 4.发布商品</span>
        </div>
        <!--添加商品-->
        <div class="bgfff p-l-29 p-r-31 p-t-29 p-b-50">
          <!-- 1 -->
          <p class="m-b-29">1.选择商品分类</p>
          <div class="d-flex align-cen p-b-29 bbef0">
            <span class="has-danger p-r-25">商品分类 <span class="form-control-feedback">*</span></span>
            <select class="custom-select w240 m-r-20 bced" v-model="prodClass" @change="selectClassChange">
              <option value="" class="cbcc">选择商品分类</option>
              <option v-for="(v,k) in goodsTypeNames" :key="k" :value="v.goodstypeId">
                {{v.name}}
              </option>
            </select>
            <span class="bgblue cfff lh30 p-l-20 p-r-20 bradius4 m-r-10" @click="addGoodsType">新增分类</span>
          </div>
          <!-- 2 -->
          <p class="m-b-19 p-t-29">2.输入商品基本信息</p>
          <!--标题-->
          <div class="d-flex align-cen">
            <span class="has-danger p-r-25">商品标题 <span class="form-control-feedback">*</span></span>
            <div class="lh38 bced bradius4 h38 p-r-20">
              <input type="text" class="b0 phgray p-l-17 w576 p-r-19 bradius4 h34" placeholder="请输入商品名称" v-model="goodsName">
              <span>{{goodsName.length}}/30</span>
            </div>
          </div>
          <!--类型-->
          <div class="d-flex align-cen p-t-32 position-relative">
            <span class="has-danger p-r-35 align-self-start">商品规格</span>
            <!--添加规格弹窗-->
            <div class="opacity1 zindex99 trans2 bottom66p p-b-29 p-t-15 left90 bgfff bced w781  bradius4  p-l-30">
              <div class="p-t-9" v-for="(v,k) in prodSize" :key="k">
                <div class="p-b-15">
                  <input type="text" v-model="v.specName" class="bced bradius4 p-l-17 lh38 h38 m-r-21 w576" placeholder="请输入商品类型名称">
                  <span class="cblue lh38" @click="delType(k)">删除</span>
                </div>
                <div class="d-flex p-b-15" v-for="(size,index) in v.list" :key="index">
                  <div class="m-r-26 d-flex jsbet w576">
                    <input type="text" class="bced bradius4 p-l-17 lh38 h38 w211" placeholder="请输入商品规格" v-model="size.specAttribute">
                    <input type="number" class="bced bradius4 p-l-17 lh38 h38 w211" placeholder="请输入库存" v-model="size.specNum">
                    <input type="text" class="bced bradius4 p-l-17 lh38 h38 w211" placeholder="请输入价格（单位：元）" v-model="size.price">
                  </div>
                  <span class="cblue lh38" @click="delSize(k,index)">删除</span>&nbsp;
                  <span class="cblue lh38" @click="addSize(k,index)">添加属性</span>
                </div>
              </div>
              <div class="cblue curpointer dis-inline-block" @click="addType">添加规格</div>
            </div>
          </div>
          <!--图片-->
          <div class="d-flex p-t-29">
            <span class="has-danger p-r-25">商品图片 <span class="form-control-feedback">*</span></span>
            <span class="cbcc flex1">上传图片的最佳尺寸：800像素*800像素，其他尺寸会影响页效果，格式png，jpeg，jpg。大小不超过2M，商品图片一共可以上传5张，默认第一张为主图封面</span>
          </div>
          <div class="d-flex p-t-29 p-l-92 lh120 p-b-30 bbef0">
            <div class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden goods-img" v-for="(v,k) in prod_imgs" :style="'background-image: url('+v+')'" :key="k">
              <img @click="delPic(k)" class="del-goods-pic" src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crmpc/2f2fbcd8d2b2177e884423142be14ac.png">
              <!--                        <img :src="v" alt="" class="w100p h100p position-absolute left0 top0 bradius4">-->
            </div>
            <label class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden icon-plus">
              <input type="file" id="file" name="image_url" style="float: left;display: none" @change="fch" />
            </label>
          </div>
          <div class="d-flex p-t-29">
            <span class="p-r-25">分享图片</span>
            <span class="cbcc flex1">上传图片及支持png/jpg 。显示图片长宽比为5:4</span>
          </div>
          <div class="p-t-29 p-l-92 p-b-30 bbef0">
            <div class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden goods-img dis-inline-block m-b-0" v-if="goodsShareImg" :style="'background-image: url('+goodsShareImg+')'">
              <img @click.stop="removeShareImg" class="del-goods-pic" src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crmpc/2f2fbcd8d2b2177e884423142be14ac.png">
              <!--                        <img :src="v" alt="" class="w100p h100p position-absolute left0 top0 bradius4">-->
            </div>
            <label v-else class="w120 h120 bradius4 textc bced m-r-20 position-relative ohidden icon-plus dis-inline-block m-b-0">
              <input type="file" ref="shareImg" style="display: none" @change="uploadShareImg" />
            </label>
            <span>
              用于小程序分享时展示图片
            </span>
          </div>
          <div class="d-flex align-cen p-t-29">
            <span class="has-danger p-r-25">是否参加分销 <span class="form-control-feedback">*</span></span>
            <div class="disflex p-r-20">
              <div class="custom-control custom-radio p-r-20">
                <input type="radio" id="join" class="custom-control-input" value="1" v-model="isDistribution">
                <label for="join" class="c38 m-l-5 m-r-10 custom-control-label">是</label>
              </div>
              <div class="custom-control custom-radio">
                <input type="radio" id="notJoin" class="custom-control-input" value="0" v-model="isDistribution">
                <label for="notJoin" class="c38 m-l-5 m-r-10 custom-control-label">否</label>
              </div>
            </div>
          </div>
          <!-- 2 -->
          <p class="m-b-19 p-t-29">3.支付方式</p>
          <!--标题-->
          <div class="d-flex align-cen">
            <span class="has-danger p-r-25">支付方式 <span class="form-control-feedback">*</span></span>
            <div class="disflex p-r-20">
              <div class="custom-control custom-radio p-r-20">
                <input type="radio" id="wuhan" class="custom-control-input" value="1" v-model="ispayment">
                <label for="wuhan" class="c38 m-l-5 m-r-10 custom-control-label">线上支付</label>
              </div>
              <div class="custom-control custom-radio">
                <input type="radio" id="xian" class="custom-control-input" value="2" v-model="ispayment">
                <label for="xian" class="c38 m-l-5 m-r-10 custom-control-label">其他</label>
              </div>
            </div>
          </div>
          <!-- 3 详情-->
          <p class="m-b-0 p-t-29">4.输入商品详情</p>
          <div class="p-t-25 p-b-29">
            <span class="has-danger p-r-25">商品详情 <span class="form-control-feedback">*</span></span>
            <div id="editor" class="p-t-29">
            </div>
          </div>
          <!--操作-->
          <div class="d-flex lh40">
            <span class="bgblue cfff hoverfff w85 textc h40 bradius4 m-r-20" @click="addGoodsInfo(goodsId)">发布</span>
            <span class="bblue cblue hoverfff w85 textc h40 bradius4" @click="preview">预览</span>
          </div>
        </div>
      </div>
    </div>
    <!--预览-->
    <prev-goods :is-show="preview_show"
       :prod_imgs="prod_imgs"
       :prod-size="prodSize"
       :edit_html="edit_html"
       :goods-name="goodsName"
      @close="preview_show=false">

    </prev-goods>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap popper Core JavaScript -->
  <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
  <script src="js/bootstrap.min.js"></script>
  <!--<script src="js/iview.min.js"></script>-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
  <!-- slimscrollbar scrollbar JavaScript -->
  <script src="js/perfect-scrollbar.jquery.min.js"></script>
  <!--Wave Effects -->
  <!-- <script src="js/waves.js"></script> -->
  <!--Menu sidebar -->
  <script src="js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="js/custom.min.js"></script>
  <!-- ============================================================== -->
  <!-- This page plugins -->
  <!-- ============================================================== -->
  <!--morris JavaScript -->
  <!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
  <!--c3 JavaScript -->
  <!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
  <!-- Popup message jquery -->
  <!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
  <!-- ============================================================== -->
  <!-- Magnific popup JavaScript -->
  <!-- <script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>
<script src="../assets/node_modules/Magnific-Popup-master/dist/jquery.magnific-popup-init.js"></script> -->
  <!-- ============================================================== -->
  <!-- Style switcher -->
  <!-- ============================================================== -->
  <!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
  <script src="js/vue.js"></script>
  <script src="js/layer/layer.js"></script>
  <!--<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>-->
  <!--<script src="js/headers.js"></script>-->
  <!--<script src="js/Aside.js"></script>-->
  <!--富文本编辑器-->
  <script type="text/javascript" src="js/wangEditor.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <script>
  $(function() {
    window.vw = new Vue({
      el: '#main-wrapper',
      // components:{header},
      data: {
        username: '用户昵称',
        search_key: '', //搜索关键字
        prodClass: '', //筛选分类的值
        title: '', //商品标题
        /**添加/修改商品信息*/
        goodsId: '', // 商品id
        goodsName: '', // 商品名称
        goodstypeId: '', // 商品类型ID
        goodsDetails: '', // 商品详情
        goodsShareImg: '', // 商品分享图片
        ispayment: '1', // 1线上支付，2其他
        remark: '', // 商品备注
        specIds: '', // 商品规格（逗号隔开）
        goodPhoto: '', // 商品图片（逗号隔开）
        /**添加/修改商品规格*/
        specId: '', //规格id
        specName: '', //规格名称
        specAttribute: '', //属性名称
        specNum: '', //规格库存
        price: '', //规格价格
        parentId: '', //父级id（如果是类型的第一个属性就给0，如果不是就给第一个属性的specId）
        prod_imgs: [], //商品图片
        img_click: 0,
        typeShow: '', //添加类型弹框
        isDistribution: '0', // 是否参加分销
        prodSize: [], //商品规格
        editor: null,
        preview_show: false,
        edit_html: '',
        goodsTypeNameList: [],
        goodsTypeNames: [],
      },
      create () {
        this.$nextTick(function(){
          console.log("nextRick",111)
        })
      },
      mounted() {
        var params = $.formatParams(location.href);
        this.initEditor();
        if (params.id > 0) {
          this.goodsId = params.id;
          this.getGoodsInfoPC(this.goodsId);
        } else {
          this.addType();
        }
        this.goodsTypeNameListInfo();
      },
      methods: {
        initEditor() {
          var E = window.wangEditor;
          this.editor = new E(document.getElementById('editor'));
          window.editor = this.editor;
          /*    this.editor.customConfig.menus = [
                  'head',  // 标题
                  'bold',  // 粗体
                  'fontSize',  // 字号
                  'fontName',  // 字体
                  'italic',  // 斜体
                  'underline',  // 下划线
                  'strikeThrough',  // 删除线
                  'foreColor',  // 文字颜色
                  'backColor',  // 背景颜色
                  'link',  // 插入链接
                  'list',  // 列表
                  'justify',  // 对齐方式
                  'quote',  // 引用
                  'emoticon',  // 表情
                  'image',  // 插入图片
                  'table',  // 表格
                  'video',  // 插入视频
                  'code',  // 插入代码
                  'undo',  // 撤销
                  'redo'  // 重复
              ];*/
          this.editor.customConfig.uploadImgShowBase64 = true;
          this.editor.customConfig.pasteTextHandle = function(content) {

            if (content == '' && !content) return ''
            let str = content;
            str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '');
            str = str.replace('/(\\n|\\r| class=(")?Mso[a-zA-Z]+(")?)/g', '');
            let reg = new RegExp('<!--(.*?)-->', 'g')
            str = str.replace(reg, '');

            return str;
          }
          //插入图片回调
          this.editor.customConfig.linkImgCallback = function(url) {
            console.log(url) // url 即插入图片的地址
          };
          this.editor.customConfig.customUploadImg = function(files, insert) { //自选图片
            let formData = new FormData();
            formData.append('file', files[0]);

            $.uploadFile(formData).then(res => {
              this.editor.txt.html(this.editor.txt.html() + '<img style="max-width:100%;height:auto;display:block" src="' + $.baseFileUrl + '/' + res.data + '.primary.png" mode="widthFix"/>');
            })
          };
          this.editor.customConfig.onchange = (html) => {
            console.log(html);
            // this.quizData.quizTitle = html;
          }
          this.editor.create();
        },
        delPic(idx) {
          this.prod_imgs.splice(idx, 1);
        },
        search() { //搜索
          console.log(this.search_key)
        },
        selectClassChange() {
          console.log(this.seleceValue)
        },
        addGoodsInfo(id) { // 添加商品信息
          var _this = this;
          var param = {};
          if (id > 0) {
            param.goodsId = id;
          }

          if (!_this.prodClass) {
            layer.alert('请选择商品分类！');
            return
          }

          if (!_this.goodsName) {
            layer.alert('请输入商品名称！');
            return
          }
          var prodSize1 = this.prodSize
          var length = this.prodSize.length;
          if(length===0) {
            layer.alert('请至少输入一种商品类型和规格！');
            return;
          } else{
            for(var i = 0; i<length; i++) {
              var list = prodSize1[i].list
              if (!prodSize1[i].specName) {
                layer.alert('商品类型和规格有参数填写不完整！');
                return
              } else if(prodSize1[i].specName.length>15){
                layer.alert('商品类型名称过长');
                return
              }
              for(var j=0; j<list.length; j++) {
                if(!list[j].price || !list[j].specNum || !list[j].specAttribute ){
                  layer.alert('商品类型和规格有参数填写不完整！');
                  return
                }
                if(list[j].specAttribute.length>15){
                  layer.alert('商品规格名称过长');
                  return
                }
              }
            }
          }
          let prodSize = JSON.parse(JSON.stringify(this.prodSize));
          prodSize.forEach(function(i, k) {

            i.list.forEach(function(i2, k2) {
              i2.price = i2.price * 100;
            })
          });

          param.goodsName = _this.goodsName;
          param.goodstypeId = _this.prodClass;
          param.goodsDetails = this.editor.txt.html();
          param.ispayment = _this.ispayment;
          param.isDistribution = _this.isDistribution;
          param.goodPhoto = _this.prod_imgs.map(val => {
            return val.replace('.primary.png', '');
          }).join(',');
          param.coverImg = _this.goodsShareImg;
          param.goodSpecRequestList = prodSize;
          console.log("当前的提交的参数位params",param)
          $.cAjax('/crmPc/companyGoods/addGoodsInfoList', {
            data: param
          }).then((data) => {
            layer.msg("操作成功");
            setTimeout(function() {
              location.href = location.origin + '/main/prodControl.html';
            }, 1.5 * 1000);
          }).catch(function(err) {});
        },
        addGoodsType() { //添加商品类型
          var param = {};
          layer.prompt({ title: '请输入商品类型名称', formType: 0 }, (val, index) => {
            param.name = val;
            $.cAjax('/crmPc/companyGoods/addGoodsType', {
              data: param
            }).then((data) => {
              layer.msg("操作成功");
              // 加载数据
              this.goodsTypeNameListInfo();
            }).catch(function(err) {});
            layer.close(index);
          });
        },
        goodsTypeNameListInfo() { //加载商品分类-下拉
          this.goodsTypeNames = [];
          var _this = this;
          $.cAjax('/crmPc/companyGoods/getGoodsTypeInfo', {
            data: {}
          }).then(function(data) {
            if (data) {
              _this.goodsTypeNames = data || [];
            }
          }).catch(function(err) {

          });
        },
        getGoodsInfoPC(id) { //加载商品详情
          var _this = this;
          $.cAjax('/crmPc/companyGoods/getGoodsInfoPC', {
            data: { goodsId: id }
          }).then(function(data) {
            if (data) {
              console.log("当前的商品详情", JSON.parse(data.pageInfo))
              var data = JSON.parse(data.pageInfo).list[0];

              _this.prodSize = data.goodSpecModelList ? data.goodSpecModelList.map(val => {
                return {
                  specName: val.specName,
                  specId: val.specId,
                  list: val.goodSpecModelList ? val.goodSpecModelList.map(item => {
                    return {
                      specAttribute: item.specAttribute,
                      specNum: item.specNum, //库存
                      price: (item.price / 100).toFixed(2),
                      specId: item.specId,
                    }
                  }) : []
                }
              }) : [];

              _this.goodsName = data.goodsName;
              _this.goodsDetails = data.goodsDetails;
              _this.goodsTypeName = data.goodsTypeName;
              _this.goodstypeId = data.goodstypeId;
              _this.prodClass = data.goodstypeId;
              _this.goodsShareImg = data.coverImg;
              _this.ispayment = data.ispayment;
              _this.isDistribution = data.isDistribution;
              _this.prod_imgs = data.goodPhoto ?
                data.goodPhoto.split(",").map(val => {
                  return $.checkImgNameIsNumber(val) ? val : (val + '.primary.png')
                }) :
                [];
              _this.editor.txt.html(data.goodsDetails);
            }
          }).catch(function(err) {
            console.log(err)
          });
        },
        addType() { //添加规格类型
          var _this = this;
          let obj = {
            specName: '',
            list: [{
              specAttribute: '',
              specNum: '',
              price: '',
            }]
          }
          _this.prodSize.push(obj);
        },
        addSize(index1, index2) { //添加规格属性
          var _this = this;
          let obj = {
            specAttribute: '',
            specNum: '',
            price: '',
          }
          _this.prodSize[index1].list.push(obj);
        },
        delType(index1) { //删除规格类型
          var _this = this;
          _this.prodSize.splice(index1, 1);
        },
        delSize(index1, index2) { //删除规格属性
          var _this = this;
          _this.prodSize[index1].list.splice(index2, 1);
        },
        preview() { //预览
          this.preview_show = true;
          this.edit_html = this.editor.txt.html();
          $('body').css('overflow', 'hidden');
        },
        confirm() { //发布
          console.log(this.editor.txt.html());
        },
        previewTap(e) { //关闭预览
          if (e.target.id == 'prev_modal') {
            this.preview_show = false;
            $('body').css('overflow', '');
          }
        },
        fch: function() {
          var v = this;
          var f = document.getElementById('file');
          if (f.files[0].type != 'image/png' && f.files[0].type != 'image/jpeg' && f.files[0].type != 'image/jpg') {
            layer.alert("请选择png、jpg、jpeg格式的图片");
            return
          }
          if (f.files[0].size / 1024 > 1024 * 2) {
            layer.alert('请上传小于2M的图片！');
            return
          }

          if (this.prod_imgs.length > 5) {
            layer.alert('最多只能上传5张图片');
            return;
          }

          let formData = new FormData;
          formData.append('file', f.files[0]);

          $.uploadFile(formData).then(res => {
            f.value = '';
            this.prod_imgs.push($.baseFileUrl + '/' + res.data + '.primary.png');
          }).catch(() => {
            f.value = '';
          });

        },
        // 上传分享图片
        uploadShareImg: function() {
          var f = this.$refs.shareImg;
          if (f.files[0].type != 'image/png' && f.files[0].type != 'image/jpeg' && f.files[0].type != 'image/jpg') {
            layer.alert("请选择png、jpg、jpeg格式的图片");
            return
          }
          if (f.files[0].size / 1024 > 1024 * 2) {
            layer.alert('请上传小于2M的图片！');
            return
          }

          let formData = new FormData;
          formData.append('file', f.files[0]);

          $.uploadFile(formData).then(res => {
            f.value = '';
            this.goodsShareImg = $.baseFileUrl + '/' + res.data + '.primary.png';
          }).catch(() => {
            f.value = '';
          });

        },
        removeShareImg() {
          this.goodsShareImg = '';
        },
      }

    })
  })
  </script>
</body>

</html>
